var list = [
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" },
  { num: "2356", name: "新零起点客户风控" }
];

var btnAdd = document.getElementsByClassName("btn-add")[0];
var btnRemove = document.getElementsByClassName("btn-remove")[0];
btnAdd.onclick = function() {};
btnRemove.onclick = function() {};

// 表格分页
var pageSize = 15; // 每页展示条数
var currentPage = 1; // 当前页
var total = list.length; // 总条数
var paginationCount = Math.ceil(total / pageSize); // 分页数量
var paginationDom = document.getElementsByClassName("pagination-count")[0];
var tableConDom = document.getElementsByClassName("table-con")[0];
// 设置表格的最大高度
var winHeight =
  document.body.clientHeight || document.documentElement.clientHeight;
tableConDom.style.height = winHeight - 150 + "px";
var paginationStr = "";
var paginationData = {};
for (var i = 0; i < paginationCount; i++) {
  paginationData[i + 1] = list.slice(i * pageSize, (i + 1) * pageSize);
  paginationStr += '<span class="pagination-item">' + (i + 1) + "</span>";
}
paginationDom.innerHTML = paginationStr;

// 分页点击事件
var paginationItems = document.getElementsByClassName("pagination-item");
for (var i = 0; i < paginationItems.length; i++) {
  paginationItems[i].index = i
  paginationItems[i].onclick = function() {
    currentPage = this.index + 1;
    initTableData(currentPage);
  };
}

// 下一页点击事件
var paginationNext = document.getElementsByClassName("pagination-next")[0];
paginationNext.onclick = function() {
  if (currentPage >= paginationCount) {
    return;
  }
  currentPage = currentPage + 1;
  initTableData(currentPage);
};

// 上一页点击事件
var paginationPre = document.getElementsByClassName("pagination-pre")[0];
paginationPre.onclick = function() {
  if (currentPage <= 1) {
    return;
  }
  currentPage = currentPage - 1;
  initTableData(currentPage);
};

// 输入页数跳转事件
var paginationInput = document.getElementsByClassName("pagination-input")[0];
paginationInput.onblur = function() {
  if (paginationInput.value === "") {
    return;
  }
  var value = paginationInput.value - 0;
  if (value > paginationCount || value < 1) {
    paginationInput.value = "";
    alert("您输入的页码已超过范围，请重新输入");
    return;
  }
  initTableData(value);
  paginationInput.value = "";
};

// 设置点击分页高亮
function paginationActive(currentPage) {
  for (var i = 0; i < paginationItems.length; i++) {
    paginationItems[i].classList.remove("pagination-active");
  }
  paginationItems[currentPage - 1].classList.add("pagination-active");
}

// 表格数据渲染
/**
 * @param {*} className 判断点击的是哪个dom节点
 * @param {*} type 0：升序、1：降序
 */
function initTableData(currentPage) {
  paginationActive(currentPage);
  var tableStr = "";
  var list = paginationData[currentPage];
  for (var i = 0; i < list.length; i++) {
    tableStr +=
      '<div class="table-item"><span class="table-span table-select"><input type="checkbox" name="" class="checked"></span><span class="table-span table-index">' +
      (i + 1) +
      '</span><span class="table-span counter-number">' +
      list[i].num +
      '</span><span class="table-span system-name">' +
      list[i].name +
      '</span><span class="table-span table-operate text-color">修改</span></div>';
  }
  tableConDom.innerHTML = tableStr;
  // 判断表格是否有滚动条
  document.getElementsByClassName("table-head")[0].style[
    "padding-right"
  ] = hasScrolled(tableConDom, "vertical") ? "10px" : "0px";
}

// 初始化表格
initTableData(1);

// 引入了公用方法，表格全选、单选、多选
tableSelect("allChecked", "checked");
